<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head th:include="sys/user/include :: header"></head>
<style>
    .container-user-r-tt {
        color: #222;
        font-weight: normal;
        font-size: 14px;
        height: 60px;
        line-height: 60px;
        border-bottom: #d9d9d9 solid 1px;
        padding-left: 15px;
    }

    .container-user-r-cont {
        padding-bottom: 50px;
    }

    .container-user-r-cont .span7 {
        width: 380px;
        height: 250px;
        margin-top: 20px;
        float: left;
    }

    .container-user-r-cont .span4 {
        float: left;
        width: 280px;
        height:250px;
        margin-top: 20px;
        padding-left:20px;
    }

    .container-user-r-cont .span4 span{
        font-size: 14px;
        height: 40px;
        width: 100%;
        display: block;
    }

    .container-user-r-cont .span4 span input[type='text']{
        width: 148px;
        height: 30px;
        border: 0;
        vertical-align: middle;
        margin-right: 10px;
        padding: 0 15px;
        outline: none;
    }

    .container-user-r-cont .u_userc_btn {
        cursor: pointer;
        width: 106px;
        padding: 0px;
        color: #288add;
    }

    .container-user-r-cont .u_userc_btn:hover {
        background: #e3f2ff;
    }

    .file {
        position: relative;
        height: 40px;
        line-height: 40px;
    }
    .userdefined-file {
        position: absolute;
        top: 0;
        left: 0px;
        z-index: 2;
        width: 200px;
        height: 40px;
        line-height: 40px;
        font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
    }
    .userdefined-file input[type="text"] {
        display: inline-block;
        vertical-align: middle;
        padding-right: 14px;
        padding-left: 14px;
        width: 150px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .userdefined-file button {
        display: inline-block;
        vertical-align: middle;
        width: 50px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background-color: #288add;
        border: none;
        color: #fff;
        cursor: pointer;
    }
    .file input[type="file"] {
        position: absolute;
        top: 0;
        left: 60px;
        z-index: 3;
        opacity: 0;
        width: 300px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
    }
    .nav-user-photo {
        margin: -4px 8px 0 8px;
        border-radius: 24px;
        border: 1px solid #3e8fd3;
        max-width: 36px!important;
        vertical-align: middle;
    }
</style>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="ibox">
                <div class="ibox-title" style="padding-bottom: 0;">
                    <h3 class="text-center hidden">个人资料中心</h3>
                    <div class="gg-nav">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#basic_info" data-toggle="tab">基本资料</a></li>
                            <li><a href="#photo_info" data-toggle="tab">头像修改</a></li>
                            <li><a href="#pwd_info" data-toggle="tab">修改密码</a></li>
                        </ul>
                    </div>
                </div>
                <div class="tab-content">
                    <!--basic info-->
                    <div class="ibox-content tab-pane fade in active"  id="basic_info">
                        <form class="gg-form" role="form" id="basicInfoForm">
                            <input name="id" type="hidden" th:value="${user.id}"/>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>姓名:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="userName" name="name" th:value="${user.name}"  placeholder="请输入姓名" />
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>手机:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="phone" name="mobile"  th:value="${user.mobile}" placeholder="请输入手机号" />
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>邮箱:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="email" name="email" th:value="${user.email}" placeholder="请输入邮箱" />
                                </div>
                            </div>
                        </form>
                        <div class="gg-btnGroup">
                            <button type="button" class="btn btn-sm btn-primary" id="base_save">保存</button>
                        </div>
                    </div>
                    <!--photo_info-->
                    <div class="ibox-content tab-pane fade gg" id="photo_info">
                        <h4 class="container-user-r-tt hidden">修改头像</h4>
                        <div class="container-user-r-cont">
                            <div class="span7">
                                <div class="img-container" style="min-height: 200px">
                                    <img src="" alt="">
                                </div>
                            </div>
                            <div class="span4">
                                <div class="docs-preview clearfix" style="display:none;">
                                    <div class="img-preview preview-lg"></div>
                                    <div class="img-preview preview-md"></div>
                                    <div class="img-preview preview-sm"></div>
                                    <div class="img-preview preview-xs"></div>
                                </div>

                                <div>
                                    <form action="" name="photoForm" id="photoForm" method="post">
                                        <input type="hidden" id="photo" name="photo" value="" />
                                        <span>X坐标(px):<input id="dataX" type="text" name="x"  value="0" readonly></span>
                                        <span>Y坐标(px):<input  id="dataY" type="text" name="y" value="0"  readonly></span>
                                        <span>宽度W(px):<input id="dataWidth" type="text" name="w" value="0" readonly></span>
                                        <span>高度H(px):<input id="dataHeight" type="text" name="h" value="0" readonly></span>
                                    </form>
                                </div>
                                <div class="file">
                                    <div class="userdefined-file">
                                        　　<input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何图片">
                                        　　<button type="button">选择</button>
                                    </div>
                                    <input type="file" name="file" id="file">
                                </div>
                            </div>
                            <p class="tc" style="clear: both">
                                <input type="button" id="upload" style="display:none;" class="btn btn-sm btn-primary" value="上传我的照片" />
                            </p>
                        </div>
                        <div class="docs-alert"><span class="warning message"></span></div>
                    </div>
                    <!--pwd_info-->
                    <div class="ibox-content tab-pane fade" id="pwd_info">
                        <form class="gg-form" role="form" id="modifyPwd">
                            <a id="logout" class="hidden" href="/logout"></a>
                            <input type="hidden" name ="userDO.id" th:value="${user.id}"/>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>旧密码:</span>
                                </div>
                                <div class="gg-formDetail gg-dashed">
                                    <input type="password" class="form-control gg-border0" id="pwdOld" name="pwdOld" placeholder="请输入旧密码" />
                                    <span class="fa fa-eye gg-faeye" title="鼠标移入显示内容"><span>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>新密码:</span>
                                </div>
                                <div class="gg-formDetail gg-dashed">
                                    <input type="password" class="form-control gg-border0" id="pwdNew" name="pwdNew" placeholder="请输入新密码" />
                                    <span class="fa fa-eye gg-faeye" title="鼠标移入显示内容"></span>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>确认密码:</span>
                                </div>
                                <div class="gg-formDetail gg-dashed">
                                    <input type="password" class="form-control gg-border0" id="confirm_password" name="confirm_password" placeholder="请确认密码" />
                                    <span class="fa fa-eye gg-faeye" title="鼠标移入显示内容"></span>
                                </div>
                            </div>
                        </form>
                        <div class="gg-btnGroup">
                            <button type="button" class="btn btn-sm btn-primary" id="pwd_save">保存</button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<div th:include="sys/user/include :: footer"></div>
<script type="text/javascript">
    var prefix = "/sys/user"
    $(function () {

        document.getElementById("file").onchange = function() {
            document.getElementById("userdefinedFile").value = document.getElementById("file").value;
        }

        $('#upload').click(function(){
            if($("#dataWidth").val()=="0"){
                parent.layer.msg('宽度不能为零');
                $("#dataWidth").focus();
                return false;
            }
            if($("#dataHeight").val()=="0"){
                parent.layer.msg('高度不能为零');
                $("#dataHeight").focus();
                return false;
            }
            $('#upload').attr({"disabled":"disabled"});
            $('#upload').val('上传中...');
            $.ajax({
                url: "/sys/user/saveUserPhoto.do",
                dataType: 'json',
                type:'POST',
                data:$('#photoForm').serialize(),
                success:function(data){
                    if(data.flag == 'true'){
                        window.location.reload();
                    }else{
                        $('#upload').val('上传我的照片');
                        $("#upload").removeAttr("disabled");
                        parent.layer.msg(data.msg);
                    }
                }
            });
        });


    });


    /**
     * 基本信息提交
     */
    $("#base_save").click(function () {
        if($("#basicInfoForm").valid()){
            $.ajax({
                cache : true,
                type : "POST",
                url :"/sys/user/updatePeronal",
                data : $('#basicInfoForm').serialize(),
                async : false,
                error : function(request) {
                    laryer.alert("Connection error");
                },
                success : function(data) {
                    if (data.code == 0) {
                        parent.layer.msg("更新成功");
                    } else {
                        parent.layer.alert(data.msg)
                    }
                }
            });
        }

    });


    $("#pwd_save").click(function () {
        if($("#modifyPwd").valid()){
            $.ajax({
                cache : true,
                type : "POST",
                url :"/sys/user/resetPwd",
                data : $('#modifyPwd').serialize(),
                async : false,
                error : function(request) {
                    parent.laryer.alert("Connection error");
                },
                success : function(data) {
                    if (data.code == 0) {
                        parent.layer.alert("更新密码成功");
                    } else {
                        parent.layer.alert(data.msg)
                    }
                }
            });
        }
    });

</script>
</body>
</html>
